<template>
  <div>
    <label>
      <div class="w-48 h-32 flex items-center justify-center border border-dashed border-slate-300 cursor-pointer rounded-md overflow-hidden">
        <!--  未自定义上传封面  -->
        <div v-if="!video.videoCover" class="flex flex-col items-center justify-center">
          <div class="mb-3">
            <svg xmlns="http://www.w3.org/2000/svg" height="2em" viewBox="0 0 448 512"><!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M256 80c0-17.7-14.3-32-32-32s-32 14.3-32 32V224H48c-17.7 0-32 14.3-32 32s14.3 32 32 32H192V432c0 17.7 14.3 32 32 32s32-14.3 32-32V288H400c17.7 0 32-14.3 32-32s-14.3-32-32-32H256V80z"/></svg>
          </div>
          <div>上传封面</div>
        </div>
        <!--  自定义上传封面  -->
        <img v-if="video.videoCover" :src="cover.imgUrl">
      </div>
      <input @change="uploadCover" ref="coverFile" type="file" class="hidden">
    </label>
  </div>
</template>

<script setup lang="ts">
import {useVideo} from "@/store/video";
import {reactive, ref, watch} from "vue";

interface Cover{
  imgBlob: Blob | null,
  imgUrl: string
}

const video = useVideo()
const cover = reactive<Cover>({
  imgBlob: null,
  imgUrl: "",
})
const coverFile = ref()

function uploadCover(){
  video.videoCover = coverFile.value.files[0]
  // cover.imgBlob = new Blob([video.videoCover], { type: video.videoCover.type });
  // 生成图片的临时 URL
  // cover.imgUrl = URL.createObjectURL(cover.imgBlob);
  cover.imgUrl = URL.createObjectURL(video.videoCover);
}


</script>

<style scoped>

</style>
